import std/[
  cgi,
  envvars,
  strutils,
  sequtils,
  times
]

import
  ./packages

const css = """
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  :root {
    /* 亮色模式变量 */
    --bg-primary: #2c3e50;
    --bg-secondary: #34495e;
    --bg-glass: rgba(255, 255, 255, 0.25);
    --bg-glass-hover: rgba(255, 255, 255, 0.3);
    --bg-glass-dark: rgba(0, 0, 0, 0.25);
    --bg-card: rgba(255, 255, 255, 0.15);
    --bg-card-hover: rgba(255, 255, 255, 0.2);
    --bg-input: rgba(255, 255, 255, 0.4);
    --bg-input-focus: rgba(255, 255, 255, 0.3);
    --bg-button: rgba(255, 255, 255, 0.4);
    --bg-button-hover: rgba(255, 255, 255, 0.5);
    --bg-stat: rgba(255, 255, 255, 0.2);
    --bg-stat-hover: rgba(255, 255, 255, 0.25);
    --bg-footer: rgba(255, 255, 255, 0.2);
    --bg-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
    
    --text-primary: #2c3e50;
    --text-secondary: #34495e;
    --text-muted: #7f8c8d;
    --text-placeholder: rgba(44, 62, 80, 0.8);
    --text-shadow: 0 2px 10px rgba(255,255,255,0.8);
    
    --border-glass: rgba(255, 255, 255, 0.18);
    --border-glass-hover: rgba(255, 255, 255, 0.3);
    --border-input: rgba(255, 255, 255, 0.5);
    --border-input-focus: rgba(255, 255, 255, 0.6);
    
    --shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    --shadow-glass-hover: 0 12px 40px 0 rgba(31, 38, 135, 0.4);
    --shadow-card: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
    --shadow-card-hover: 0 12px 40px 0 rgba(31, 38, 135, 0.3);
  }

  [data-theme="dark"] {
    /* 暗色模式变量 */
    --bg-primary: #e2e8f0;
    --bg-secondary: #cbd5e0;
    --bg-glass: rgba(0, 0, 0, 0.4);
    --bg-glass-hover: rgba(0, 0, 0, 0.5);
    --bg-glass-dark: rgba(255, 255, 255, 0.1);
    --bg-card: rgba(0, 0, 0, 0.3);
    --bg-card-hover: rgba(0, 0, 0, 0.4);
    --bg-input: rgba(0, 0, 0, 0.3);
    --bg-input-focus: rgba(0, 0, 0, 0.4);
    --bg-button: rgba(0, 0, 0, 0.3);
    --bg-button-hover: rgba(0, 0, 0, 0.4);
    --bg-stat: rgba(0, 0, 0, 0.3);
    --bg-stat-hover: rgba(0, 0, 0, 0.4);
    --bg-footer: rgba(0, 0, 0, 0.3);
    --bg-gradient: linear-gradient(135deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.2) 100%);
    
    --text-primary: #e2e8f0;
    --text-secondary: #cbd5e0;
    --text-muted: #a0aec0;
    --text-placeholder: rgba(226, 232, 240, 0.8);
    --text-shadow: 0 2px 10px rgba(0,0,0,0.8);
    
    --border-glass: rgba(255, 255, 255, 0.1);
    --border-glass-hover: rgba(255, 255, 255, 0.2);
    --border-input: rgba(255, 255, 255, 0.2);
    --border-input-focus: rgba(255, 255, 255, 0.3);
    
    --shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.6);
    --shadow-glass-hover: 0 12px 40px 0 rgba(0, 0, 0, 0.7);
    --shadow-card: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
    --shadow-card-hover: 0 12px 40px 0 rgba(0, 0, 0, 0.5);
  }

  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    background: 
      var(--bg-gradient),
      url('/static/bg/298141.jpg') center/cover no-repeat fixed;
    min-height: 100vh;
    transition: color 0.3s ease, background 0.3s ease;
  }

  /* macOS风格主题切换开关 */
  .theme-switch {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .theme-switch-container {
    position: relative;
    width: 44px;
    height: 24px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 
      inset 0 1px 2px rgba(0, 0, 0, 0.1),
      0 1px 3px rgba(0, 0, 0, 0.1);
  }

  /* 暗色模式时的开关背景 */
  [data-theme="dark"] .theme-switch-container {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.2);
  }

  /* 开关激活状态 - 柔和的马卡龙蓝色 */
  .theme-switch-container.active {
    background: linear-gradient(135deg, #A8D8EA 0%, #7FB3D3 100%);
    border-color: #A8D8EA;
    box-shadow: 
      inset 0 1px 2px rgba(255, 255, 255, 0.2),
      0 2px 8px rgba(168, 216, 234, 0.3);
  }

  [data-theme="dark"] .theme-switch-container.active {
    background: linear-gradient(135deg, #B8E6B8 0%, #9BCDD2 100%);
    border-color: #B8E6B8;
    box-shadow: 
      inset 0 1px 2px rgba(255, 255, 255, 0.2),
      0 2px 8px rgba(184, 230, 184, 0.3);
  }

  /* 滑动按钮 */
  .theme-switch-slider {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: #ffffff;
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 
      0 1px 3px rgba(0, 0, 0, 0.2),
      0 1px 2px rgba(0, 0, 0, 0.1);
    border: 0.5px solid rgba(0, 0, 0, 0.04);
  }

  /* 激活状态的滑动按钮 */
  .theme-switch-container.active .theme-switch-slider {
    transform: translateX(20px);
    box-shadow: 
      0 2px 4px rgba(0, 0, 0, 0.2),
      0 1px 2px rgba(0, 0, 0, 0.1);
  }

  /* 开关文字标签 */
  .theme-switch-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.3s ease;
    user-select: none;
    opacity: 0.7;
    white-space: nowrap;
  }

  .theme-switch-label.active {
    color: var(--text-primary);
    opacity: 1;
    font-weight: 600;
  }





  .theme-icon {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
  }

  .theme-toggle:hover .theme-icon {
    transform: rotate(20deg);
  }

  /* macOS 玻璃效果基础样式 */
  .glass {
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-glass);
    box-shadow: var(--shadow-glass);
    transition: all 0.3s ease;
  }

  .glass-dark {
    background: var(--bg-glass-dark);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-glass);
    box-shadow: var(--shadow-glass);
  }

  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
  }

  .header {
    position: relative;
    text-align: center;
    margin-bottom: 40px;
    color: var(--text-primary);
    padding: 40px 20px;
    border-radius: 20px;
    background: var(--bg-glass-hover);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-glass-hover);
    box-shadow: var(--shadow-card);
    transition: all 0.3s ease;
  }

  .header h1 {
    font-size: 3rem;
    margin-bottom: 10px;
    text-shadow: var(--text-shadow);
    font-weight: 600;
    color: var(--text-primary);
    transition: all 0.3s ease;
  }

  .header a {
    text-decoration: none;
    color: inherit;
  }

  .header p a {
    color: var(--text-secondary);
    text-decoration: none;
    border-bottom: 1px solid var(--text-secondary);
    opacity: 0.6;
    transition: all 0.3s ease;
  }

  .header p a:hover {
    opacity: 1;
    border-bottom-color: var(--text-secondary);
  }

  .header p {
    font-size: 1.2rem;
    opacity: 0.9;
    color: var(--text-secondary);
    transition: all 0.3s ease;
  }

  .footer {
    text-align: center;
    padding: 30px 20px;
    margin-top: 40px;
    background: var(--bg-footer);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--border-glass);
    border-radius: 20px 20px 0 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.8;
    transition: all 0.3s ease;
  }

  .footer a {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
  }

  .footer a:hover {
    color: #3498db;
    text-shadow: 0 0 10px rgba(52, 152, 219, 0.3);
  }

  .footer-heart {
    color: #e74c3c;
    animation: heartbeat 1.5s ease-in-out infinite;
    display: inline-block;
    margin: 0 4px;
  }

  @keyframes heartbeat {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
  }

  .search-container {
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-glass);
    border-radius: 20px;
    padding: 30px;
    box-shadow: var(--shadow-glass);
    margin-bottom: 30px;
    transition: all 0.3s ease;
  }

  .search-container:hover {
    background: var(--bg-glass-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-glass-hover);
  }

  .search-form {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
  }

  .search-input {
    flex: 1;
    padding: 15px 20px;
    border: 1px solid var(--border-input);
    border-radius: 12px;
    font-size: 1.1rem;
    background: var(--bg-input);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--text-primary);
    transition: all 0.3s ease;
  }

  .search-input::placeholder {
    color: var(--text-placeholder) !important;
  }

  .search-input::-webkit-input-placeholder {
    color: var(--text-placeholder) !important;
  }

  .search-input::-moz-placeholder {
    color: var(--text-placeholder) !important;
    opacity: 1;
  }

  .search-input:-ms-input-placeholder {
    color: var(--text-placeholder) !important;
  }

  .search-input:-moz-placeholder {
    color: var(--text-placeholder) !important;
    opacity: 1;
  }

  .search-input:focus {
    outline: none;
    border-color: var(--border-input-focus);
    background: var(--bg-input-focus);
    box-shadow: 0 0 20px var(--border-glass);
  }

  .search-button {
    padding: 15px 30px;
    background: var(--bg-button);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--text-primary);
    border: 1px solid var(--border-input);
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 100px;
  }

  .search-button:hover {
    background: var(--bg-button-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--border-glass);
  }

  .search-button:disabled {
    opacity: 0.7;
    cursor: not-allowed;
  }

  .stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 30px;
  }

  .stat-card {
    background: var(--bg-stat);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--border-glass);
    padding: 20px;
    border-radius: 16px;
    text-align: center;
    box-shadow: var(--shadow-card);
    transition: all 0.3s ease;
  }

  .stat-card:hover {
    background: var(--bg-stat-hover);
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
  }

  .stat-number {
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 5px;
    text-shadow: var(--text-shadow);
    transition: all 0.3s ease;
  }

  .stat-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
  }

  .results-container {
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-glass);
    border-radius: 20px;
    padding: 30px;
    box-shadow: var(--shadow-glass);
    transition: all 0.3s ease;
  }

  .results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid #f0f0f0;
  }

  .results-count {
    font-size: 1.1rem;
    color: var(--text-muted);
    transition: color 0.3s ease;
  }

  .back-link {
    color: #1f3ab4;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
  }

  .back-link:hover {
    text-decoration: underline;
  }

  .package-card {
    background: var(--bg-card);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-glass);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 15px;
    transition: all 0.3s ease;
  }

  .package-card:hover {
    background: var(--bg-card-hover);
    transform: translateY(-4px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--border-glass-hover);
  }

  .package-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
  }

  .package-name {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    text-shadow: var(--text-shadow);
    transition: all 0.3s ease;
  }

  .package-name:hover {
    color: var(--text-secondary);
  }

  .package-score {
    background: var(--bg-button);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--text-primary);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid var(--border-input);
    transition: all 0.3s ease;
  }

  .package-description {
    color: var(--text-secondary);
    margin-bottom: 10px;
    line-height: 1.5;
    transition: all 0.3s ease;
  }

  .package-meta {
    display: flex;
    gap: 15px;
    font-size: 0.9rem;
    color: var(--text-muted);
    transition: all 0.3s ease;
  }

  .package-meta a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.3s ease;
  }

  .package-meta a:hover {
    color: var(--text-primary);
  }

  .package-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
  }

  .package-updates {
    display: flex;
    gap: 15px;
    justify-content: space-between;
  }

  @media (max-width: 768px) {
    .package-updates {
      flex-direction: column;
    }
  }

  .update-info>div {
    font-size: 12px;
  }

  .tag {
    background: rgba(255, 255, 255, 0.2);
    color: var(--text-muted);
    padding: 4px 8px;
    border-radius: 15px;
    font-size: 0.8rem;
    height: fit-content;
    border: 1px solid var(--border-glass);
    transition: all 0.3s ease;
  }

  .package-details {
    background: var(--bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--border-glass);
    border-radius: 20px;
    padding: 30px;
    box-shadow: var(--shadow-glass);
    transition: all 0.3s ease;
  }

  .detail-header {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--border-glass);
    transition: all 0.3s ease;
  }

  .detail-name {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--text-primary);
    margin-bottom: 10px;
    transition: all 0.3s ease;
  }

  .detail-description {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin-bottom: 20px;
    transition: all 0.3s ease;
  }

  .detail-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
  }

  .meta-item {
    background: var(--bg-card);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-glass);
    padding: 15px;
    border-radius: 12px;
    transition: all 0.3s ease;
  }

  .meta-label {
    font-weight: bold;
    color: var(--text-primary);
    margin-bottom: 5px;
    transition: all 0.3s ease;
  }

  .meta-value {
    color: var(--text-secondary);
    transition: all 0.3s ease;
  }

  .detail-tags {
    margin-top: 20px;
  }

  .detail-tags h3 {
    margin-bottom: 10px;
    color: var(--text-primary);
    transition: all 0.3s ease;
  }

  .no-results {
    text-align: center;
    padding: 40px;
    color: var(--text-secondary);
    transition: all 0.3s ease;
  }

  .no-results h3 {
    margin-bottom: 10px;
    color: var(--text-primary);
    transition: all 0.3s ease;
  }

  .loading {
    text-align: center;
    padding: 40px;
    color: var(--text-secondary);
    transition: all 0.3s ease;
  }

  /* 动画效果 */
  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  /* 修复搜索按钮样式 */
  .search-form {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    align-items: stretch;
  }

  .animate-spin {
    animation: spin 1s linear infinite;
  }

  .opacity-50 {
    opacity: 0.5;
  }

  .flex {
    display: flex;
  }

  .items-center {
    align-items: center;
  }

  /* 页面加载动画 */
  .container > * {
    animation: fadeInUp 0.6s ease-out;
  }

  .container > *:nth-child(1) { animation-delay: 0.1s; }
  .container > *:nth-child(2) { animation-delay: 0.2s; }
  .container > *:nth-child(3) { animation-delay: 0.3s; }

  /* 响应式设计 */
  @media (max-width: 768px) {
    .container {
      padding: 10px;
    }

    .header {
      padding: 30px 15px;
    }

    .header h1 {
      font-size: 2rem;
    }

    .theme-switch {
      top: 15px;
      right: 15px;
      gap: 6px;
    }

    .theme-switch-container {
      width: 38px;
      height: 20px;
      border-radius: 10px;
    }

    .theme-switch-slider {
      width: 16px;
      height: 16px;
      top: 1px;
      left: 1px;
    }

    .theme-switch-container.active .theme-switch-slider {
      transform: translateX(18px);
    }

    .theme-switch-label {
      font-size: 11px;
    }

    .search-form {
      flex-direction: column;
    }

    .search-container, .results-container {
      padding: 20px;
    }

    .package-header {
      flex-direction: column;
      gap: 10px;
    }

    .package-meta {
      flex-direction: column;
      gap: 5px;
    }

    .stats {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 480px) {
    .theme-switch {
      top: 10px;
      right: 10px;
      gap: 4px;
    }

    .theme-switch-container {
      width: 32px;
      height: 18px;
      border-radius: 9px;
    }

    .theme-switch-slider {
      width: 14px;
      height: 14px;
      top: 1px;
      left: 1px;
    }

    .theme-switch-container.active .theme-switch-slider {
      transform: translateX(14px);
    }

    .theme-switch-label {
      font-size: 10px;
    }
  }

  /* 深色模式额外样式 */
  [data-theme="dark"] .tag {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    border: 1px solid var(--border-glass);
  }

  [data-theme="dark"] .results-header {
    border-bottom-color: var(--border-glass);
  }

  [data-theme="dark"] .detail-header {
    border-bottom-color: var(--border-glass);
  }

  [data-theme="dark"] .meta-item {
    background: var(--bg-card);
    border: 1px solid var(--border-glass);
  }

  [data-theme="dark"] .meta-label {
    color: var(--text-primary);
  }

  [data-theme="dark"] .meta-value {
    color: var(--text-secondary);
  }

  [data-theme="dark"] .back-link {
    color: #60a5fa;
  }

  [data-theme="dark"] .back-link:hover {
    color: #93c5fd;
  }

  /* 主题切换按钮动画 */
  @keyframes themeSwitch {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.1); }
    100% { transform: rotate(360deg) scale(1); }
  }

  .theme-toggle.switching .theme-icon {
    animation: themeSwitch 0.6s ease-in-out;
  }

  /* 深色模式支持 */
  @media (prefers-color-scheme: dark) {
    .search-input::placeholder {
      color: var(--text-placeholder) !important;
    }
  }
"""

const js = """
  // 主题管理器
  function themeManager() {
    return {
      isDark: false,
      
      init() {
        // 从localStorage读取主题设置
        const savedTheme = localStorage.getItem('theme');
        const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
        
        this.isDark = savedTheme === 'dark' || (!savedTheme && prefersDark);
        this.applyTheme();
        
        // 监听系统主题变化
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
          if (!localStorage.getItem('theme')) {
            this.isDark = e.matches;
            this.applyTheme();
          }
        });
      },
      
      toggleTheme() {
        this.isDark = !this.isDark;
        this.applyTheme();
        localStorage.setItem('theme', this.isDark ? 'dark' : 'light');
        
        // 添加切换动画效果
        const themeToggle = document.querySelector('.theme-toggle');
        themeToggle.classList.add('switching');
        
        document.body.style.transition = 'all 0.3s ease';
        setTimeout(() => {
          document.body.style.transition = '';
          themeToggle.classList.remove('switching');
        }, 600);
      },
      
      applyTheme() {
        if (this.isDark) {
          document.documentElement.setAttribute('data-theme', 'dark');
        } else {
          document.documentElement.removeAttribute('data-theme');
        }
      },
      
      get themeText() {
        return this.isDark ? '亮色' : '暗色';
      }
    }
  }

  // Alpine.js 数据和方法
  function searchApp() {
    return {
      query: '',
      isSearching: false,
      
      async search() {
        if (!this.query.trim()) return;
        
        this.isSearching = true;
        // 添加搜索动画效果
        setTimeout(() => {
          window.location.href = '/search?q=' + encodeURIComponent(this.query.trim());
        }, 300);
      },
      
      handleKeydown(event) {
        if (event.key === 'Enter') {
          event.preventDefault();
          this.search();
        }
      }
    }
  }

  // 页面加载完成后的初始化
  document.addEventListener('DOMContentLoaded', function() {
    // 添加页面加载动画
    document.body.style.opacity = '0';
    document.body.style.transform = 'translateY(20px)';
    
    setTimeout(() => {
      document.body.style.transition = 'all 0.6s ease';
      document.body.style.opacity = '1';
      document.body.style.transform = 'translateY(0)';
    }, 100);

    // 添加滚动视差效果
    window.addEventListener('scroll', function() {
      const scrolled = window.pageYOffset;
      const header = document.querySelector('.header');
      if (header) {
        header.style.transform = `translateY(${scrolled * 0.5}px)`;
      }
    });
  });
"""

proc header(title, canonical, description: string): string =
  let head = ("""<meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" href="/favicon.ico" type="image/x-icon">
  <title>$1</title>
  <link rel="canonical" href="$2">
  <meta name="description" content="$3">
  <meta property="og:type" content="website">
  <meta property="og:url" content="$3">
  <meta property="og:title" content="$1">
  <meta property="og:description" content="$3">
  <meta property="og:image" content="https://nimpackages.com/nimpackages.png">
  <meta name="twitter:card" content="summary_large_image">
  <script src="//unpkg.com/alpinejs" defer></script>
  $4
  """.format(title, canonical, description, getEnv("HTML_HEAD")))

  return head & """<style>""" & css & """  </style>""" & "\n"

proc indexPackagesAll*(): string =
  let stats = getPackageCount()
  let lastUpdated = getLastUpdated().fromUnix()

  result = """
  <!DOCTYPE html>
  <html lang="en">
  <head>
  """ & header(
    "风铃草 (Campanula) - 发现 Nim 库",
    "https://nimpackages.com/",
    "搜索和发现 Nim 库和 Nimble 包。浏览包统计、最新更新，使用 Nimble 快速安装。"
  ) & """
  </head>
  <body>
    <div class="container">
      <div class="header">
        <!-- macOS风格主题切换开关 -->
        <div class="theme-switch" x-data="themeManager()" x-init="init()">
          <span class="theme-switch-label" :class="{ 'active': !isDark }">光</span>
          <div class="theme-switch-container" :class="{ 'active': isDark }" @click="toggleTheme()">
            <div class="theme-switch-slider"></div>
          </div>
          <span class="theme-switch-label" :class="{ 'active': isDark }">暗</span>
        </div>
        
        <a href="/">
          <div style="display: flex; justify-content: center; align-items: center; gap: 20px; ">
            <div class="stat-number" style="position: relative;">
              <span style="position: absolute; top: -8px; left: 50%; transform: translateX(-50%); font-size: 0.8em;">👑</span>
              <span style="margin-top: 8px; display: inline-block;">📦</span>
            </div>
            <h1>风铃草 (Campanula)</h1>
          </div>
        </a>
        <p>发现和探索 Nim 库和包</p>
        <p>了解更多关于 <a href="https://nim-lang.org" target="_blank">Nim 语言</a> 和 <a href="https://nim-lang.github.io/nimble/" target="_blank">Nimble 包管理器</a></p>
      </div>

      <div class="search-container" x-data="searchApp()">
        <form class="search-form" @submit.prevent="search()">
          <input
            type="text"
            x-model="query"
            @keydown="handleKeydown($event)"
            class="search-input"
            placeholder="搜索包 (例如：'clap'、'http'、'json')..."
            autocomplete="off"
            x-ref="searchInput"
          >
          <button 
            type="submit" 
            class="search-button"
            :disabled="isSearching"
          >
            <span x-show="!isSearching">搜索</span>
            <span x-show="isSearching" style="display: flex; align-items: center; gap: 8px;">
              <svg style="width: 16px; height: 16px; animation: spin 1s linear infinite;" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                <circle style="opacity: 0.25;" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path style="opacity: 0.75;" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
              </svg>
              搜索中...
            </span>
          </button>
        </form>

        <div class="stats">
          <div class="stat-card">
            <div class="stat-number">""" & $stats & """</div>
            <div class="stat-label">包总数</div>
          </div>
          <div class="stat-card">
            <div class="stat-number">""" & lastUpdated.format("yyyy-MM-dd HH:mm:ss") & """</div>
            <div class="stat-label">最后更新</div>
          </div>

          <div class="stat-card">
            <div class="stat-label" style="text-align: left;">使用 Nimble 安装</div>
            <div style="margin-top: 10px; font-family: 'Monaco', 'Menlo', monospace; font-size: 0.8rem; color: var(--text-muted); text-align: left; transition: color 0.3s ease;">
              <div style="margin-bottom: 5px;">$ nimble install &lt;包名&gt;</div>
              <div>$ nimble install --depsOnly</div>
            </div>
          </div>
        </div>
      </div>

      <div class="results-container">
        <div class="results-header">
          <h2>包列表</h2>
        </div>
        <p style="text-align: center; color: var(--text-secondary); padding: 40px; transition: color 0.3s ease;">
          使用上方搜索栏来发现 Nim 包。
          <br>试试搜索：<strong style="color: var(--text-primary); transition: color 0.3s ease;">clap</strong>、<strong style="color: var(--text-primary); transition: color 0.3s ease;">http</strong>、<strong style="color: var(--text-primary); transition: color 0.3s ease;">json</strong> 或 <strong style="color: var(--text-primary); transition: color 0.3s ease;">async</strong>
          <br>或者访问 <a href="/api" style="color: var(--text-primary); transition: color 0.3s ease;">API</a> 接口。
        </p>
      </div>
    </div>
    <div class="footer">
      <div style="margin-bottom: 10px;">
        🌸 用<span class="footer-heart">❤️</span>制作的风铃草 (Campanula) 🌸
      </div>
      <div style="font-size: 0.8rem; opacity: 0.8;">
        如风铃草般温柔而忠诚 · 承载着对开源社区的感恩之心<br>
        为 <a href="https://nim-lang.org" target="_blank">Nim</a> 开发者提供永恒的包搜索与发现服务
      </div>
      <div style="margin-top: 15px; font-size: 0.75rem; opacity: 0.6;">
        花语：感恩 · 温柔的爱 · 永恒的爱 · 忠诚 ✨
      </div>
    </div>
    <script>""" & js & """</script>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebSite",
      "name": "风铃草 (Campanula)",
      "url": "https://nimpackages.com/",
      "potentialAction": {
        "@type": "SearchAction",
        "target": "https://nimpackages.com/search?q={search_term_string}",
        "query-input": "required name=search_term_string"
      }
    }
    </script>
  </body>
  </html>
  """

proc indexPackagesSearch*(query: string): string =
  let searchResults = searchPackagesWithScore(query)

  var resultsHtml = ""
  if searchResults.len > 0:
    for result in searchResults:
      let package = result.package
      let tagsHtml = package.tags.mapIt("""<span class="tag">""" & it & """</span>""").join("")

      # 是否应该打开并显示信息？这让我很烦恼。我只想直接访问仓库。
      # <a href="/package/""" & package.name & """" class="package-name">""" & package.name & """</a>
      resultsHtml &= """
        <div class="package-card">
          <div class="package-header">
            <a href="""" & package.url & """" target="_blank" class="package-name">""" & package.name & """</a>
            <span class="package-score">评分: """ & $result.score & """</span>
          </div>
          <div class="package-description">""" & package.description & """</div>
          <div class="package-meta">
            <span>📦 """ & package.mmethod & """</span>
            <span>📄 """ & package.license & """</span>
            <span>🔗 <a href="""" & package.url & """" target="_blank">代码仓库</a></span>
            <span>🔗 <a href="""" & package.web & """" target="_blank">官方网站</a></span>
          </div>
          <div class="package-updates">
            <div class="package-tags">""" & tagsHtml & """</div>
            <div class="update-info">
              <div>🔄 最后更新: """ & package.latestUpdateDate.multiReplace([("T", " "), ("Z", "")]) & """</div>
              <div>🔄 最新版本: """ & package.latestVersion & """</div>
            </div>
          </div>
        </div>
      """
  else:
    resultsHtml = """
      <div class="no-results">
        <h3>未找到包</h3>
        <p>请尝试不同的搜索词或浏览所有包。</p>
      </div>
    """

  result = """
  <!DOCTYPE html>
  <html lang="en">
  <head>
    """ & header(
      "搜索结果 - 风铃草 (Campanula)",
      "https://nimpackages.com/search?q=" & query.xmlEncode,
      "风铃草包搜索结果：'" & query.xmlEncode & "'"
    ) & """
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    """ & getEnv("HTML_HEAD") & """
    <link rel="icon" href="/favicon.ico" type="image/x-icon">
    <title>搜索结果 - 风铃草 (Campanula)</title>
    <style>""" & css & """</style>
  </head>
  <body>
    <div class="container">
      <div class="header">
        <!-- macOS风格主题切换开关 -->
        <div class="theme-switch" x-data="themeManager()" x-init="init()">
          <span class="theme-switch-label" :class="{ 'active': !isDark }">光</span>
          <div class="theme-switch-container" :class="{ 'active': isDark }" @click="toggleTheme()">
            <div class="theme-switch-slider"></div>
          </div>
          <span class="theme-switch-label" :class="{ 'active': isDark }">暗</span>
        </div>
        
        <a href="/">
          <div style="display: flex; justify-content: center; align-items: center; gap: 20px; ">
            <div class="stat-number" style="position: relative;">
              <span style="position: absolute; top: -8px; left: 50%; transform: translateX(-50%); font-size: 0.8em;">👑</span>
              <span style="margin-top: 8px; display: inline-block;">📦</span>
            </div>
            <h1>风铃草 (Campanula)</h1>
          </div>
        </a>
        <p>搜索结果</p>
      </div>

      <div class="search-container" x-data="searchApp()">
        <form class="search-form" @submit.prevent="search()">
          <input
            type="text"
            x-model="query"
            @keydown="handleKeydown($event)"
            class="search-input"
            placeholder="搜索包..."
            value="""" & query.xmlEncode & """"
            autocomplete="off"
            x-init="query = '""" & query.xmlEncode & """'"
          >
          <button 
            type="submit" 
            class="search-button"
            :disabled="isSearching"
          >
            <span x-show="!isSearching">搜索</span>
            <span x-show="isSearching">搜索中...</span>
          </button>
        </form>
      </div>

      <div class="results-container">
        <div class="results-header">
          <div class="results-count">找到 """ & $searchResults.len & """ 个结果，搜索词：'""" & query.xmlEncode & """'</div>
          <a href="/" class="back-link">← 返回首页</a>
        </div>
        """ & resultsHtml & """
      </div>
    </div>
    <div class="footer">
      <div style="margin-bottom: 10px;">
        🌸 用<span class="footer-heart">❤️</span>制作的风铃草 (Campanula) 🌸
      </div>
      <div style="font-size: 0.8rem; opacity: 0.8;">
        如风铃草般温柔而忠诚 · 承载着对开源社区的感恩之心<br>
        为 <a href="https://nim-lang.org" target="_blank">Nim</a> 开发者提供永恒的包搜索与发现服务
      </div>
      <div style="margin-top: 15px; font-size: 0.75rem; opacity: 0.6;">
        花语：感恩 · 温柔的爱 · 永恒的爱 · 忠诚 ✨
      </div>
    </div>
    <script>""" & js & """</script>
  </body>
  </html>
  """

proc packageDetails*(name: string): string =
  let package = getPackage(name)

  if package.name.len == 0:
    return """
    <!DOCTYPE html>
    <html lang="en">
    <head>
      """ & header(
        "包未找到 - 风铃草 (Campanula)",
        "https://nimpackages.com/package/" & name.xmlEncode,
        "风铃草包 '" & name.xmlEncode & "' 未找到"
      ) & """
    </head>
    <body>
      <div class="container">
        <div class="header">
          <!-- macOS风格主题切换开关 -->
          <div class="theme-switch" x-data="themeManager()" x-init="init()">
            <span class="theme-switch-label" :class="{ 'active': !isDark }">光</span>
            <div class="theme-switch-container" :class="{ 'active': isDark }" @click="toggleTheme()">
              <div class="theme-switch-slider"></div>
            </div>
            <span class="theme-switch-label" :class="{ 'active': isDark }">暗</span>
          </div>
          
          <a href="/">
            <div style="display: flex; justify-content: center; align-items: center; gap: 20px; ">
              <div class="stat-number" style="position: relative;">
                <span style="position: absolute; top: -8px; left: 50%; transform: translateX(-50%); font-size: 0.8em;">👑</span>
                <span style="margin-top: 8px; display: inline-block;">📦</span>
              </div>
              <h1>风铃草 (Campanula)</h1>
            </div>
          </a>
          <p>包未找到</p>
        </div>
        <div class="package-details">
          <div class="no-results">
            <h3>包 '""" & name.xmlEncode & """' 未找到</h3>
            <p>您要查找的包不存在或已被删除。</p>
            <a href="/" class="back-link">← 返回首页</a>
          </div>
        </div>
      </div>
      <div class="footer">
        <div style="margin-bottom: 10px;">
          🌸 用<span class="footer-heart">❤️</span>制作的风铃草 (Campanula) 🌸
        </div>
        <div style="font-size: 0.8rem; opacity: 0.8;">
          如风铃草般温柔而忠诚 · 承载着对开源社区的感恩之心<br>
          为 <a href="https://nim-lang.org" target="_blank">Nim</a> 开发者提供永恒的包搜索与发现服务
        </div>
        <div style="margin-top: 15px; font-size: 0.75rem; opacity: 0.6;">
          花语：感恩 · 温柔的爱 · 永恒的爱 · 忠诚 ✨
        </div>
      </div>
    </body>
    </html>
    """

  let tagsHtml = package.tags.mapIt("""<span class="tag">""" & it & """</span>""").join("")

  result = """
  <!DOCTYPE html>
  <html lang="en">
  <head>
    """ & header(
      package.name.xmlEncode & " - 风铃草 (Campanula)",
      "https://nimpackages.com/package/" & name.xmlEncode,
      "风铃草包 '" & name.xmlEncode & "' 详情"
    ) & """
  </head>
  <body>
    <div class="container">
      <div class="header">
        <a href="/">
          <div style="display: flex; justify-content: center; align-items: center; gap: 20px; ">
            <div class="stat-number" style="position: relative;">
              <span style="position: absolute; top: -8px; left: 50%; transform: translateX(-50%); font-size: 0.8em;">👑</span>
              <span style="margin-top: 8px; display: inline-block;">📦</span>
            </div>
            <h1>Nim Packages</h1>
          </div>
        </a>
        <p>包详情</p>
      </div>

      <div class="package-details">
        <div class="detail-header">
          <div class="detail-name">""" & package.name.xmlEncode & """</div>
          <div class="detail-description">""" & package.description.xmlEncode & """</div>
        </div>

        <div class="detail-meta">
          <div class="meta-item">
            <div class="meta-label">安装方式</div>
            <div class="meta-value">""" & package.mmethod.xmlEncode & """</div>
          </div>
          <div class="meta-item">
            <div class="meta-label">许可证</div>
            <div class="meta-value">""" & package.license.xmlEncode & """</div>
          </div>
          <div class="meta-item">
            <div class="meta-label">代码仓库</div>
            <div class="meta-value"><a href="""" & package.url.xmlEncode & """" target="_blank">""" & package.url.xmlEncode & """</a></div>
          </div>
          <div class="meta-item">
            <div class="meta-label">官方网站</div>
            <div class="meta-value"><a href="""" & package.web.xmlEncode & """" target="_blank">""" & package.web.xmlEncode & """</a></div>
          </div>
        </div>

        <div style="display: flex; justify-content: space-between;">
          <div class="detail-tags">
            <h3>标签</h3>
            <div class="package-tags">""" & tagsHtml & """</div>
          </div>
          """ & (if package.latestVersion.len > 0: """
          <div class="detail-meta" style="margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border-glass); transition: border-color 0.3s ease;">
            <h3 style="margin-bottom: 15px; color: var(--text-primary); transition: color 0.3s ease;">仓库信息</h3>
            <div class="meta-item">
              <div class="meta-label">托管平台</div>
              <div class="meta-value">""" & package.repoPlatform.xmlEncode & """</div>
            </div>
            <div class="meta-item">
              <div class="meta-label">最新版本</div>
              <div class="meta-value">""" & package.latestVersion.xmlEncode & """</div>
            </div>
            <div class="meta-item">
              <div class="meta-label">最后更新</div>
              <div class="meta-value">""" & package.latestUpdateDate.xmlEncode & """</div>
            </div>
          </div>
          """ else: "") & """
        </div>


        <div style="margin-top: 30px; text-align: center;">
          <a href="/" class="back-link">← 返回首页</a>
        </div>
      </div>
    </div>
    <div class="footer">
      <div style="margin-bottom: 10px;">
        🌸 用<span class="footer-heart">❤️</span>制作的风铃草 (Campanula) 🌸
      </div>
      <div style="font-size: 0.8rem; opacity: 0.8;">
        如风铃草般温柔而忠诚 · 承载着对开源社区的感恩之心<br>
        为 <a href="https://nim-lang.org" target="_blank">Nim</a> 开发者提供永恒的包搜索与发现服务
      </div>
      <div style="margin-top: 15px; font-size: 0.75rem; opacity: 0.6;">
        花语：感恩 · 温柔的爱 · 永恒的爱 · 忠诚 ✨
      </div>
    </div>
  </body>
  </html>
  """

proc apiEndpoints*(): string =
  result = """
  <!DOCTYPE html>
  <html lang="en">
  <head>
    """ & header(
      "API 接口 - 风铃草 (Campanula)",
      "https://nimpackages.com/api",
      "风铃草包 API 接口"
    ) & """
  </head>
  <body>
    <div class="container">
      <div class="header">
        <!-- macOS风格主题切换开关 -->
        <div class="theme-switch" x-data="themeManager()" x-init="init()">
          <span class="theme-switch-label" :class="{ 'active': !isDark }">光</span>
          <div class="theme-switch-container" :class="{ 'active': isDark }" @click="toggleTheme()">
            <div class="theme-switch-slider"></div>
          </div>
          <span class="theme-switch-label" :class="{ 'active': isDark }">暗</span>
        </div>
        
        <a href="/">
          <div style="display: flex; justify-content: center; align-items: center; gap: 20px; ">
            <div class="stat-number" style="position: relative;">
              <span style="position: absolute; top: -8px; left: 50%; transform: translateX(-50%); font-size: 0.8em;">👑</span>
              <span style="margin-top: 8px; display: inline-block;">📦</span>
            </div>
            <h1>风铃草 (Campanula)</h1>
          </div>
        </a>
        <p>API 接口</p>
      </div>

      <div class="results-container">
        <div class="results-header">
          <h2>API Endpoints</h2>
          <a href="/" class="back-link">← Back to Home</a>
        </div>

        <div style="margin-bottom: 30px;">
          <h3 style="color: var(--text-primary); margin-bottom: 15px; transition: color 0.3s ease;">📡 REST API</h3>
          <p style="color: var(--text-secondary); margin-bottom: 20px; transition: color 0.3s ease;">
            All endpoints return JSON responses and support CORS for cross-origin requests.
          </p>
        </div>

        <div style="display: grid; gap: 20px;">
          <div class="package-card">
            <div class="package-header">
              <span class="package-name">GET /api/packages</span>
              <span class="package-score">JSON</span>
            </div>
            <div class="package-description">Get all packages in the database</div>
            <div class="package-meta">
              <span>📊 Returns: Array of packages</span>
              <span>🔗 <a href="/api/packages" target="_blank">Try it</a></span>
            </div>
          </div>

          <div class="package-card">
            <div class="package-header">
              <span class="package-name">GET /api/packages/search?q=&lt;query&gt;</span>
              <span class="package-score">JSON</span>
            </div>
            <div class="package-description">Search packages with scoring and relevance ranking (high quality only)</div>
            <div class="package-meta">
              <span>📊 Returns: Scored results with match types</span>
              <span>🎯 Score 40+: name, description, tag matches</span>
              <span>🔗 <a href="/api/packages/search?q=clap" target="_blank">Try it</a></span>
            </div>
          </div>

          <div class="package-card">
            <div class="package-header">
              <span class="package-name">GET /api/packages/search/simple?q=&lt;query&gt;</span>
              <span class="package-score">JSON</span>
            </div>
            <div class="package-description">Simple search packages (high quality only)</div>
            <div class="package-meta">
              <span>📊 Returns: Array of packages</span>
              <span>🎯 Score 40+: name, description, tag matches</span>
              <span>🔗 <a href="/api/packages/search/simple?q=http" target="_blank">Try it</a></span>
            </div>
          </div>

          <div class="package-card">
            <div class="package-header">
              <span class="package-name">GET /api/packages/tag/&lt;tag&gt;</span>
              <span class="package-score">JSON</span>
            </div>
            <div class="package-description">Search packages by specific tag</div>
            <div class="package-meta">
              <span>📊 Returns: Array of packages with matching tag</span>
              <span>🔗 <a href="/api/packages/tag/http" target="_blank">Try it</a></span>
            </div>
          </div>

          <div class="package-card">
            <div class="package-header">
              <span class="package-name">GET /api/packages/&lt;name&gt;</span>
              <span class="package-score">JSON</span>
            </div>
            <div class="package-description">Get specific package by name</div>
            <div class="package-meta">
              <span>📊 Returns: Single package object</span>
              <span>🔗 <a href="/api/packages/yaclap" target="_blank">Try it</a></span>
            </div>
          </div>

          <div class="package-card">
            <div class="package-header">
              <span class="package-name">GET /api/stats</span>
              <span class="package-score">JSON</span>
            </div>
            <div class="package-description">Get package statistics and metadata</div>
            <div class="package-meta">
              <span>📊 Returns: Total packages, last updated timestamp</span>
              <span>🔗 <a href="/api/stats" target="_blank">Try it</a></span>
            </div>
          </div>
        </div>

        <div style="margin-top: 40px; padding: 20px; background: var(--bg-card); backdrop-filter: blur(10px); border: 1px solid var(--border-glass); border-radius: 15px; transition: all 0.3s ease;">
          <h3 style="color: var(--text-primary); margin-bottom: 15px; transition: color 0.3s ease;">🛡️ Rate Limiting</h3>
          <p style="color: var(--text-secondary); margin-bottom: 10px; transition: color 0.3s ease;">
            Rate limiting is enabled to ensure fair usage of the API:
          </p>
          <ul style="color: var(--text-secondary); margin-left: 20px; transition: color 0.3s ease;">
            <li>Maximum 60 requests per minute per IP address</li>
            <li>Exceeding the limit will result in a 429 Too Many Requests response</li>
            <li>Rate limits reset every minute automatically</li>
            <li>Rate limit headers are included in all responses</li>
          </ul>
        </div>

        <div style="margin-top: 30px; padding: 20px; background: var(--bg-card); backdrop-filter: blur(10px); border: 1px solid var(--border-glass); border-radius: 15px; transition: all 0.3s ease;">
          <h3 style="color: var(--text-primary); margin-bottom: 15px; transition: color 0.3s ease;">📋 Response Format</h3>
          <p style="color: var(--text-secondary); margin-bottom: 10px; transition: color 0.3s ease;">
            All API responses follow a consistent JSON format:
          </p>
          <div style="background: var(--bg-input); backdrop-filter: blur(10px); border: 1px solid var(--border-glass); color: var(--text-primary); padding: 15px; border-radius: 12px; font-family: 'Monaco', 'Menlo', monospace; font-size: 0.9rem; overflow-x: auto; transition: all 0.3s ease;">
            <pre>{
  "packages": [...],
  "count": 123,
  "query": "search term",
  "searchInfo": {
    "description": "High-quality results only (score 40+)"
  }
}</pre>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div style="margin-bottom: 10px;">
        🌸 用<span class="footer-heart">❤️</span>制作的风铃草 (Campanula) 🌸
      </div>
      <div style="font-size: 0.8rem; opacity: 0.8;">
        如风铃草般温柔而忠诚 · 承载着对开源社区的感恩之心<br>
        为 <a href="https://nim-lang.org" target="_blank">Nim</a> 开发者提供永恒的包搜索与发现服务
      </div>
      <div style="margin-top: 15px; font-size: 0.75rem; opacity: 0.6;">
        花语：感恩 · 温柔的爱 · 永恒的爱 · 忠诚 ✨
      </div>
    </div>
  </body>
  </html>
  """
